<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>Title</title>
    <link rel="stylesheet" href="${ctxPath}/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${ctxPath}/static/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="${ctxPath}/static/editormd/css/editormd.min.css">
    <link rel="stylesheet" href="${ctxPath}/static/editormd/css/editormd.logo.min.css">
    <link rel="stylesheet" href="${ctxPath}/static/editormd/css/editormd.preview.min.css">
    <link async rel="stylesheet" href="https://cdn.materialdesignicons.com/1.8.36/css/materialdesignicons.min.css"/>
    <link rel="stylesheet" href="${ctxPath}/static/checkbox_v1/css/htmleaf-demo.css">
    <link rel="stylesheet" href="${ctxPath}/static/checkbox_v1/src/pretty.css">
    <link rel="stylesheet" href="${ctxPath}/static/bootstrap-tagsinput/bootstrap-tagsinput.css">
    <link rel="stylesheet" href="${ctxPath}/static/bootstrap-dialog/css/bootstrap-dialog.min.css">
	<style type="text/css">
        .modal-header{padding: 10px}
        .bootstrap-dialog-close-button{display: block!important;}

    </style>
</head>
<body style="overflow-x: hidden">
<div class="container-fluid">
    <h3 style="border-bottom: 1px solid #eeeeee">MarkDown编辑器</h3>
    <div  class="form-horizontal" >
        <div class="col-md-8">
           <div class="form-group">
               <label class="control-label col-md-2">标题</label>
               <div class="col-md-10">
                   <input type="text" class="form-control" placeholder="请输入标题" id="title">
               </div>
           </div>
        </div>
        <div class="col-md-4">
            <div class="pretty">
                <input type="checkbox"/>
                <label><i class="mdi mdi-check"></i> 自适应高度</label>
            </div>
        </div>
        <div class="col-md-8">
            <div class="form-group">
                <label class="control-label col-md-2">类别</label>
                <div class="col-md-4">
                <input type="hidden" id="type"/>
                    <input type="text" class="form-control" id="typeName" placeholder="请选择">
                </div>
                <label class="control-label col-md-2">标签</label>
                <div class="col-md-4">
                    <input id="tags" type="text" class="form-control" placeholder="请输入标签">
                </div>
            </div>
        </div>
        <div class="col-md-4">
           <!--  <button class="btn btn-default" onclick="exportPDF()"><i class="fa fa-file-pdf-o" ></i> 导出PDF</button> -->
            <button class="btn btn-primary" onclick="saveForm()"><i class="fa fa-check" ></i> 提交</button>
        </div>
        <div class="col-md-8">
            <div class="form-group">
             <label class="control-label col-md-2">样式</label>
                <div class="col-md-3">
                    <select id="editormd-theme-select" class="form-control">
                    </select>
                </div>
                <div class="col-md-3">
                    <select id="editor-area-theme-select" class="form-control">
                    </select>
                </div>
                <div class="col-md-3">
                    <select id="preview-area-theme-select" class="form-control">
                    </select>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="form-group">
             <label class="control-label col-md-2">附件</label>
              <div class="col-md-10">
                  <input name='attachIds' id="attachfile_input"  type="hidden"/>
               <div id="attachfile_disp"></div>
              	<a onclick="attachUpload('attachfile_input','attachfile_disp');" href="javascript:void(0);" class="btn btn-primary">增加附件</a>        
                </div>
            </div>
        </div>
       
    <div class="row">
        <div id="articleAdd-editormd">
            <textarea style="display:none;"></textarea>
        </div>
    </div>
   
</div>

<script type="text/javascript" src="${ctxPath}/static/jquery-2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="${ctxPath}/static/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="${ctxPath}/static/bootstrap-dialog/js/bootstrap-dialog.min.js"></script>
<script type="text/javascript" src="${ctxPath}/static/editormd/editormd.min.js"></script>
<script type="text/javascript" src="${ctxPath}/static/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
<script type="text/javascript">
    var basePath = "${staticPath}";
</script>
<script type="text/javascript" src="${ctxPath}/static/util.js"></script>
<script type="text/javascript">

    var testEditor;
    function themeSelect(id, themes, lsKey, callback)
    {
        var select = $("#" + id);
        
        for (var i = 0, len = themes.length; i < len; i ++)
        {                    
            var theme    = themes[i];
            var selected = (localStorage[lsKey] == theme) ? " selected=\"selected\"" : "";
            
            select.append("<option value=\"" + theme + "\"" + selected + ">" + theme + "</option>");
        }
        
        select.bind("change", function(){
            var theme = $(this).val();
            
            if (theme === "")
            {
                alert("theme == \"\"");
                return false;
            }
            
            console.log("lsKey =>", lsKey, theme);
            
            localStorage[lsKey] = theme;
            callback(select, theme);
        }); 
        
        return select;
    }
    $(function() {
    	$('#tags').tagsinput();
    	$('#typeName').focus(function(){
    		var dialog=parent.$('<div>').dialog({
    			 title : '选择文章类型',
    	            width : 500,
    	            height : 300,
    	            modal:true,
    	            onClose:function(){
    	            	dialog.dialog('destroy');
    	            },
    	            href : '${path }/articleType/toTreeSelect',
    	            buttons : [ {
    	                text : '确定',
    	                handler : function() {
    	                	var row = parent.articleTypeTreeGridSelect.datagrid('getSelected'); 
    	                	if(row!=null){
	        					$('#type').val(row.id); 
	        			    	$('#typeName').val(row.name);
    	                	}
    	                	dialog.dialog('close');
    	                }
    	            } ]
    		});
    		$(this).blur();
    	})
        testEditor = editormd("articleAdd-editormd", {
            width   : "95%",
            height  : 640,
            path    : "${ctxPath}/static/editormd/lib/",
            theme        : (localStorage.theme) ? localStorage.theme : "default",
            previewTheme : (localStorage.previewTheme) ? localStorage.previewTheme : "default", 
            editorTheme  : (localStorage.editorTheme) ? localStorage.editorTheme : "default", 
            codeFold : true,
            //syncScrolling : false,
            saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
            searchReplace : true,
            //watch : false,                // 关闭实时预览
            htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启    
            //toolbar  : false,             //关闭工具栏
            //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
            emoji : true,
            taskList : true,
            tocm            : true,         // Using [TOCM]
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
            //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
            //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
            //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
            //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
            //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "${ctxPath}/upload/uploadEditormd",
            onload : function() {
                console.log('onload', this);
                //this.fullscreen();
                //this.unwatch();
                //this.watch().fullscreen();

                //this.setMarkdown("#PHP");
                //this.width("100%");
                //this.height(480);
                //this.resize("100%", 640);
             	//   上传的后台只需要返回一个 JSON 数据，仅支持POST请求，结构如下：
               /*  {
                   success : 0 | 1,           // 0 表示上传失败，1 表示上传成功
                   message : "提示的信息，上传成功或上传失败及错误信息等。",
                   url     : "图片地址"        // 上传成功时才返回
                } */
            }
        });
        themeSelect("editormd-theme-select", editormd.themes, "theme", function($this, theme) {
            testEditor.setTheme(theme);
        });
        
        themeSelect("editor-area-theme-select", editormd.editorThemes, "editorTheme", function($this, theme) {
            testEditor.setCodeMirrorTheme(theme); 
            // or testEditor.setEditorTheme(theme);
        });
        
        themeSelect("preview-area-theme-select", editormd.previewThemes, "previewTheme", function($this, theme) {
            testEditor.setPreviewTheme(theme);
        });          
        /*
         // or
         testEditor = editormd({
         id      : "test-editormd",
         width   : "90%",
         height  : 640,
         path    : "../lib/"
         });
         */
    });
    
  
    
    function saveForm(){
    	var title=$('#title').val();
    	var tags=$('#tags').val();
    	var type=$('#type').val();
    	var typeName=$('#typeName').val();
    	var attachIds=$('#attachfile_input').val();
    	//获取editor.md markdown内容
    	var content=testEditor.getMarkdown();
    	//获取editor.md html内容
    	var html=testEditor.getHTML();     
    	var data={"attachIds":attachIds,"title":title,"tags":tags,"type":type,"typeName":typeName,"content":content,"htmlContent":html};
    	if(title==''){
    		parent.$.messager.alert('提示','标题不能为空','info');
    		return;
    	}
    	if(tags==''){
    		parent.$.messager.alert('提示','标签不能为空','info');
    		return;
    	}
    	if(type==''){
    		parent.$.messager.alert('提示','类型不能为空','info');
    		return;
    	}
    	 $.ajax({
    		url:"${path}/article/add",
    		dataType:'json',
    		type:'post',
    		data:data,
    		success:function(data){
    			if(data.success){
    				parent.showMsg(data.msg);
    				parent.articleDataGrid.datagrid('load');
    				parent.index_tabs.tabs('close','发布文章');
    			}else{
    				parent.$.messager.alert('错误',data.msg,'error');
    			}
    		}
    	}) 
    }
   
    function attachUpload(id,id_disp){
        var dialog=BootstrapDialog.show({
            title:'上传',
           draggable:true,
           closable:false,
           message:$('<div></div>').load("${ctxPath}/streamUpload/toUpload2?domId="+id+"&domIdDisp="+id_disp),
           shown:function (dialogref) {

        },
        buttons:[{
            label:'确定',
            cssClass:'btn-primary',
            action:function (dialogref) {
               	
                dialogref.close();
            }
        },{
            label:'取消',
            action:function (dialogref) {
                dialogref.close();
            }
        }]
    });
     dialog.getModalBody().css('overflow-y','auto').css('overflow-x','hidden');
    }
</script>
</body>
</html>